<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var oP = document.getElementById('record');

            var mouse = utils.captureMouse(canvas); //捕获鼠标位置

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
           ball = new Ball(20,"green"), //半径20的球
               handles = [],
               numHandles = 4,
               spring = 0.13,
               f = 0.9,
               movingHandle = null;
           
           //创建3个小球体
           for(var i=0; i<numHandles; i++){
               var handle = new Ball(10, "red");
               handle.x = Math.random()*canvas.width;
               handle.y = Math.random()*canvas.height;
               handles.push(handle);
           }
           
           canvas.addEventListener('mousedown', function(event){
               var tof = true;
               handles.forEach(function(handle){
                   if(utils.containsPoint(handle.getBounds(), mouse.x, mouse.y)){
                       removeary(handles,handle);
                        console.log(handle);
                       movingHandle = handle;
                       tof = false;
                   }
               })
               if(tof){
                   var handle = new Ball(10, "red");
                       handle.x = mouse.x;
                       handle.y =  mouse.y;
                       handles.push(handle);
               }
           }, false);
           canvas.addEventListener('mouseup', function(event){
               if(movingHandle){
                   movingHandle = null;
               }
           }, false);
           
           canvas.addEventListener('mousemove', function(event){
               if(movingHandle){
                   movingHandle.x = mouse.x;
                   movingHandle.y = mouse.y;
               }
           }, false);
           
            
            function removeary(ary,one){
                for(var i=0;i<ary.length;i++){
                   if(ary[i]==one){
                     ary.splice(i,1);
                     break;
                   }
                }
            }
            

           //
           function applyHandle(handle){
               
               var dx = handle.x - ball.x;
               var dy = handle.y - ball.y;
                
               ball.vx += dx*spring;
               ball.vy += dy*spring;

           }
           
           //画操作点到小球的线
           function drawHandle(handle){
               context.strokeStyle = "white";
               context.moveTo(ball.x, ball.y);
               context.lineTo(handle.x, handle.y);
               context.stroke();
               handle.draw(context);
           }
           
           handles.forEach(applyHandle);

           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
                handles.forEach(applyHandle);
               
               ball.vx *= f;
               ball.vy *= f;
               ball.x += ball.vx;
               ball.y += ball.vy;
               
               
               context.beginPath();
               handles.forEach(drawHandle);
               context.closePath();
               
               ball.draw(context);
               
           }())
                
        }


        /*
         1、缓动动画

        var dx = targetX - object.x,
            dy = targetY - object.y;

        var vx = dx * easing,
            vy = dy * easing;

            object.x += vx;
            object.y += vy;
        2、缓动动画，精简形式

        object.x += (targetX - object.x) * easing;
        object.y += (targetY - object.y) * easing;
        3、弹性动画

        var ax = (targetX - object.x) * spring;
        var ay = (targetY - object.y) * spring;

        var vx += ax;
        var vy += ay;

        vx *= f;
        vy *= f;

        object.x += vx;
        object.y += vy;
        4、弹性动画,精简形式

        vx += (targetX - object.x) * spring;
        vy += (targetY - object.y) * spring;

        object.x += (vx*=f);
        object.y += (vy*=f);
        5、 Offset spring

        var dx = object.x - fixedX,
            dy = object.y - fixedY;
            angle = Math.atan2(dy, dx);
            targetX = fixed + Math.cos(angle)*springLength,
            targetY = fixed + Math.sin(angle)*springLength;

            //spring to targetX, targetY as above
    
        */
    </script>
</body>
</html>
